<template>
  <div class="star-rating">
    <span
      v-for="(star, idx) in 5"
      :key="idx"
      class="star"
      :class="getStarClass(idx)"
    >
      <svg v-if="getStarClass(idx) === 'full'" viewBox="0 0 24 24"><path fill="#ff2340" d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
      <svg v-else-if="getStarClass(idx) === 'half'" viewBox="0 0 24 24"><defs><linearGradient id="half"><stop offset="50%" stop-color="#ff2340"/><stop offset="50%" stop-color="#fff"/></linearGradient></defs><path fill="url(#half)" d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
      <svg v-else viewBox="0 0 24 24"><path fill="#eee" d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
    </span>
    <span class="score-text">{{ score }}</span>
  </div>
</template>

<script setup>
const { score } = defineProps({
  score: {
    type: Number,
    required: true
  }
})

const getStarClass = (idx) => {
  if (score >= idx + 1) return 'full'
  if (score >= idx + 0.5) return 'half'
  return 'empty'
}
</script>

<style scoped>
.star-rating {
  display: flex;
  align-items: center;
  gap: 4px;
}
.star {
  width: 24px;
  height: 24px;
  display: inline-block;
}
.score-text {
  color: #ff2340;
  font-size: 20px;
  font-weight: bold;
  margin-left: 6px;
}
</style>
